<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>产品中心</title>
    <link href="css/base.css" type="text/css" rel="stylesheet" />
    <link href="css/productxq.css" type="text/css" rel="stylesheet" />
    <link href="css/jquery-ui-1.9.2.custom.css" type="text/css" rel="stylesheet" />
    <!-- <link href="css/style.css" type="text/css" /> -->
</head>

<body class="layui-container">
    <div id="app">
        <!--顶部-->
        <div class="banner">
            <!--头部-->
            <div class="top">
                <div class="logo"></div>
                <span></span>
                <div class="txt01">
                    <p>专注护肤行业<b>10年</b></p>
                    <p>我们只生产最高品质的护肤产品</p>
                </div>
                <div class="tel">
                    <p>服务咨询热线</p>
                    <b>400-888-2837</b>
                </div>
            </div>
            <!--导航-->
            <div class="nav">
                <div class="nav_bg">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><span></span><a href="product.html?series=0">产品中心</a></li>
                        <li><span></span><a href="brandIdea.html">理念</a></li>
                        <li><span></span><a href="addProduct.html">添加产品</a></li>
                        <li><span></span><a href="search.html">搜索</a></li>
                    </ul>
                    <div class="search">
                        <button class="s01" id="searchProduct" style="background-color: #077c2b; border: none; color: #fff; 
                        padding: 5px 10px; font-size: 14px; font-weight: bold;
                        box-shadow: 0 2px 4px rgba(0,0,0,.2);">产品搜索</button>
                        <input type="text" placeholder="请输入关键字" class="s02" id="searchContent"/><span></span>
                        <button id="login" onClick="logout()" style="background-color: #077c2b; border: none; color: #fff; 
                        padding: 5px 10px; font-size: 14px; font-weight: bold;
                        box-shadow: 0 2px 4px rgba(0,0,0,.2);">
                            退出账号
                        </button>
                        <button id="loginUser"
                            style="cursor: default; background-color: #077c2b; border: none; color: white; height: 25px;"><a
                                href="login.html" style="color: white;">未登录</a></button>
                    </div>
                </div>
            </div>
            <i></i>
        </div>
        <!-- 子评论的value -->
        <input type="hidden" v-model="chlidComments" id="chlidValue" />
        <div class="main">
            <h2>当前位置：<a href="index.html">首页</a>><a href="product.html?series=0">产品中心</a>><a href="#">产品详情</a></h2>
            <div class="left">
                <div class="title"><span></span>产品中心</div>
                <ul>

                    <li class="curr"><a href="#">{{product.productSeries}}</a></li>

                </ul>

                <div class="yin"><img src="images/yin01.png" /> </div>
            </div>


            <div class="right" id="center">
                <div class="title">
                    <p class="curr"><a href="javascript:">{{product.productSeries}}</a></p>
                    <button style="width:40px;height: 40px;" @onClick="deleteProduct" id="deleteProduct"
                        v-if="role==1">删除</button>
                    <button style="width:40px;height: 40px;" @click="updateProduct" id="updateProduct"
                        v-if="role==1">修改</button>
                </div>
                <div id="dialog" style="display:none" class="ui-widget ui-widget-content ui-corner-all">
                    <!-- dialog内容 -->
                    <!-- 弹出层内容 -->
                    <div style="background-color: #90e2a9;">
                        <div style="background-color: #90e2a9;padding: 10px;">
                            <h3 style="margin:0;">修改产品详情</h3>
                        </div>
                        <div>
                            <table style="width:100%; border-collapse:collapse;">
                                <tr style="height:40px;">
                                    <!-- 产品名 -->
                                    <td
                                        style="width: 80px;text-align:right;padding-right:10px;border-bottom:1px solid #90e2a9;">
                                        名称:</td>
                                    <td style="border-bottom:1px solid #90e2a9;"><input type="text" value=""
                                            id="getProductName" style="width:300px;border:none;"></td>
                                </tr>
                                <!-- 产品系列 -->
                                <tr style="height:40px;">
                                    <td style="text-align:right;padding-right:10px;border-bottom:1px solid #90e2a9;">系列:
                                    </td>
                                    <td style="border-bottom:1px solid #90e2a9;"><input type="text" id="getProductSeries"
                                            style="width:300px;border:none;"></td>
                                </tr>
                                <!-- 产品简介 -->
                                <tr style="height:80px;">
                                    <td
                                        style="text-align:right;padding-right:10px;vertical-align:top;border-bottom:1px solid #90e2a9;">
                                        简介:</td>
                                    <td style="border-bottom:1px solid #90e2a9;"><textarea rows="5" cols="50"
                                            id="getProductintroduction"
                                            style="width:300px;border:none;resize:none;"></textarea></td>
                                </tr>
                                <tr>
                                    <!-- 产品详情 -->
                                    <td
                                        style="text-align:right;padding-right:10px;vertical-align:top;border-bottom:1px solid #90e2a9;">
                                        详情:</td>
                                    <td style="border-bottom:1px solid #90e2a9;"><textarea rows="10" cols="50"
                                            id="getProductMessage"
                                            style="width:300px;border:none;resize:none;"></textarea></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!-- dialog内容结束 -->
                    <!-- 弹出层内容结束 -->
                </div>
                <div class="line"><b></b><i></i></div>
                <div class="set01">
                    <div class="box01">
                        <b><img src="images/product06.jpg" style="border:solid 1px #d2e0ce;width: 25vh;height: 25vh;"
                                id="productImage" /></b>
                        <span id="productMessage">产品名称：新七白美白滋养霜</br>系　　列：新七白系列</br>加倍莹润并呵护肌肤，令肌肤润白细腻</span>
                    </div>
                    <div class="txt" id="productTxt">
                        <p>升级新七白精华,有效淡化黑眼圈，均匀美白眼周肌肤加倍莹润并呵护肌肤，令肌肤润白细腻,蕴含白芍、白蔹、白芨、白蒺藜等七种中草药萃集而成的“新七白”升级精华，质地醇厚细腻，幼滑丰润，有效修护肤色不均，加倍莹润并呵护肌肤，令肌肤润白细腻，水嫩透亮。升级新七白精华，柔化肌肤角质层，供给肌肤所需水分与养份。升级新七白精华，给于肌肤特润嫩白的加倍呵护。升级新七白精华，促进眼周肌肤循环，有效消减眼袋及幼纹，淡化黑眼圈。升级新七白精华，持续使用，有效嫩白身体肌肤。
                        </p>
                        <p>升级新七白精华,有效淡化黑眼圈，均匀美白眼周肌肤加倍莹润并呵护肌肤，令肌肤润白细腻,蕴含白芍、白蔹、白芨、白蒺藜等七种中草药萃集而成的“新七白”升级精华，质地醇厚细腻，幼滑丰润，有效修护肤色不均，加倍莹润并呵护肌肤，令肌肤润白细腻，水嫩透亮。升级新七白精华，柔化肌肤角质层，供给肌肤所需水分与养份。升级新七白精华，给于肌肤特润嫩白的加倍呵护。升级新七白精华，促进眼周肌肤循环，有效消减眼袋及幼纹，淡化黑眼圈。升级新七白精华，持续使用，有效嫩白身体肌肤。
                        </p>
                    </div>
                    <h3>关联产品</h3>
                    <div class="box02" id="display">
                        <ul id="displayUi">
                            <li><img src="images/product001.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白日霜</span></li>
                            <li><img src="images/product002.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白润体乳</span></li>
                            <li><img src="images/product003.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白嫩肤眼膜</span></li>
                            <li><img src="images/product004.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白柔肤水</span></li>

                            <li><img src="images/product005.png"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白润体乳</span></li>
                            <li><img src="images/product002.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白嫩肤眼膜</span></li>
                            <li><img src="images/product003.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白柔肤水</span></li>
                            <li><img src="images/product008.png"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白日霜</span></li>

                            <li><img src="images/product009.png"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白润体乳</span></li>
                            <li><img src="images/product002.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白嫩肤眼膜</span></li>
                            <li><img src="images/product003.jpg"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白柔肤水</span></li>
                            <li><img src="images/product012.png"
                                    style="border:solid 1px #d2e0ce" /><br /><span>新七白美白润体乳</span></li>
                        </ul>
                    </div>

                </div>
                <!-- 评论面板 -->
                <div class="card">
                    <div class="card-header">发表评论</div>
                    <div class="card-body">
                        <div class="form-item">
                            <label>评论:</label>
                            <div>
                                <textarea name="desc" class="textarea" id="comments"></textarea>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="input-block">
                                <button class="btn" @click="addCommentByProductId">发表</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="timeDiv">
                    <ul class="timeline" id="commentLine">
                        <!-- v-for循环评论 -->
                        <li class="timeline-item" v-for="dataComment in comment" :key="dataComment.id">
                            <img :src="'http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/title/'+dataComment.title" :alt="dataComment.user"
                                class="circle" style="width: 50px; height: 50px;">
                            <div class="timeline-content text">
                                <div class="timeline-title">
                                    <span class="badge-rim">评论时间:{{dataComment.createTime}}</span>
                                    <span class="badge-rim">评论人:{{dataComment.user}}</span>
                                </div>
                                {{dataComment.content}}
                            </div>
                            <!-- dataComment.id是主评论id 当点击回复的时候会吧主评论id赋值给productID并且isAddChildComment=true 然后打开条件成立 -->
                            <div v-if="isAddChildComment && productId===dataComment.id">
                                <textarea id="childComment" v-model="chlidComments">
                                </textarea>
                                </br>
                                <button id="addChild" @click="addChildComment(dataComment.id)">点击回复</button>
                            </div><button style="height: 3vh;" id="addChildComment"
                                @click="isAddChildComments(dataComment.id)">{{commentValue}}</button>
                            <ul class="timeline-item" v-for="chli in dataComment.chlids
                            " :key="chli.id">
                                <li class="timeline-item">
                                    <img :src="'http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/title/'+chli.title" :alt="chli.user"
                                        class="circle" style="width: 50px; height: 50px;">
                                    <div class="timeline-content text">
                                        <div class="timeline-title">
                                            <span class="badge-rim">评论时间:{{chli.createTime}}</span>
                                            <span class="badge-rim">评论人:{{chli.user}}</span>
                                        </div>
                                        回复: {{chli.content}}
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>


            </div>
        </div>


        <!--底部-->
        <div class="bottom">
            <div class="bb">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><span></span><a href="product.html?series=0">产品中心</a></li>
                    <li><span></span><a href="brandIdea.html">理念</a></li>
                    <li><span></span><a href="addProduct.html">添加产品</a></li>
                    <li><span></span><a href="search.html">搜索</a></li>
                </ul>
            </div>
            <p>© 珺柚</p>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script src="js/ajax.js"></script>
<script src="js/vue.js"></script>
<script src="./js/userIsLogin.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            role: 0,
            id: 0,
            product: {
                productSeries: "",
            },
            relevanceProduct: [],
            comment: [],
            comments: [],
            chlidComments: "",
            isAddChildComment: false,
            productId: "",
            commentValue: "回复",
            username: "",

        },
        //进入页面就运行
        created() {
            //获取当前登录用户
            this.username = sessionStorage.getItem("username");
            //获取用户角色
            this.role = sessionStorage.getItem("role");
            //获取url的id
            const searchParams = new URLSearchParams(window.location.search);
            this.id = searchParams.get('id');
            //通过id获取产品详情
            this.getProductInfoById();
            //获取评论
            this.getComment();
            //创建弹出层
            let id = this.id;
            $("#dialog").dialog({
                autoOpen: false,
                value: id,
                //打开弹出层执行的方法
                open: function () {
                    //修改方法通过id获取产品信息
                    $.ajax({
                        url: 'http://localhost:3000/getProductById?id=' + id,
                        success: function (response) {
                            console.log(response);
                            let product = response.data[0];
                            //给弹出层的input框赋值
                            $("#getProductName").val(product.productName);
                            $("#getProductSeries").val(product.productSeries);
                            $("#getProductintroduction").val(product.introduction);
                            $("#getProductMessage").val(product.message);
                        }
                    });
                },
                //按钮方法
                buttons: {
                    //调用修改的接口
                    '确定修改': function () {
                        $.ajax({
                            type: 'POST',
                            url: 'http://localhost:3000/updateProductById',
                            contentType: 'application/json',
                            dataType: 'json',
                            data: JSON.stringify({
                                productName: $("#getProductName").val(),
                                productSeries: $("#getProductSeries").val(),
                                introduction: $("#getProductintroduction").val(),
                                message: $("#getProductMessage").val(),
                                id: id
                            }),
                            success: function (response) {
                                console.log(response);
                                alert("修改成功，请关闭并刷新页面");
                            }
                        });
                    },
                    '关闭': function () {
                        $(this).dialog("close");
                    }
                },
                // 默认不打开弹出层
                width: 500,      // 宽度
                // height: 500,     // 高度
                modal: true      // 添加遮罩层
            });
        },
        methods: {
            // 通过产品id获取产品详细信息
            getProductInfoById() {
                ajax.get("/getProductById?id=" + this.id, (data) => {
                    this.product = data.data[0];
                    var productInfo = `
                    产品名称：${this.product.productName}</br>
                    系　　列：${this.product.productSeries}</br>
                    ${this.product.introduction}
                    `;
                    $("#productMessage").html(productInfo);
                    $("#productTxt").html(`<p>${this.product.message}</p>`);
                    $("#productImage").attr("src", `http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/product/${this.product.imgSrc}`);
                    //调用关联产品表
                    this.getRelevanceProduct(this.product.productSeries);
                });
            },
            //删除
            deleteProduct() {
                //获取url的传参id
                const searchParams = new URLSearchParams(window.location.search);
                this.id = searchParams.get('id');
                //是否删除产品选择项
                if (confirm('是否确认删除该产品?')) {
                    this.deleteProductById(this.id);
                    this.deleteSalesById(this.id);
                }
            },
            //通过产品id删除产品
            deleteProductById(id) {
                ajax.get("/deleteProductById?id=" + id, (data) => {

                });
            },
            //删除销量通过产品id
            deleteSalesById(id) {
                ajax.get("/deleteSalesById?id=" + id, (data) => {
                    window.location.href = "index.html"
                });
            },
            //获取关联产品信息
            getRelevanceProduct(productSeries) {
                ajax.get("/getRelevanceProduct?productSeries=" + productSeries, (data) => {
                    this.relevanceProduct = data.data;
                    var dataList = "";
                    for (let i = 0; i < this.relevanceProduct.length; i++) {
                        dataList += `
                        <li>
                            <img src="http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/product/${this.relevanceProduct[i].imgSrc}"style="border:solid 1px #d2e0ce;width:15vh;height:15vh;" />
                            <br />
                            <span><a href="productxq.html?id=${this.relevanceProduct[i].id}">${this.relevanceProduct[i].productName}</a></span>
                        </li>`;
                    }
                    $("#displayUi").html(dataList + `
                    <div class="prev"><a href="javascript:"></a></div>
                    <div class="next"><a href="javascript:"></a></div>
                    `);
                });
            },
            //获取评论
            getComment() {
                //先获取url的id
                const searchParams = new URLSearchParams(window.location.search);
                let id = searchParams.get('id');
                //post请求传参
                let jsonData = {
                    id: id,
                };
                ajax.post("/getMainCommentByProductId", jsonData, (data) => {
                    this.comment = data.data;
                    console.log(this.comment);
                    //主评论列表
                    var mainComment = [];
                    //子评论列表
                    var chlidComment = [];
                    //判断是主评论还是子评论
                    for (let i = 0; i < this.comment.length; i++) {
                        //如果父id为空，就是主评论
                        if (this.comment[i].parentId == null) {
                            mainComment.push(this.comment[i]);
                        } else {
                            //否则就是子评论
                            chlidComment.push(this.comment[i]);
                        }
                    }
                    //如果存在评论
                    if (mainComment.length > 0) {
                        //循环主评论
                        for (let i = 0; i < mainComment.length; i++) {
                            //初始化一个空列表
                            mainComment[i].chlids = [];
                            //如果存在子评论
                            if (chlidComment.length > 0) {
                                //循环获取子评论，然后给他放到chlids列表里面
                                for (let j = 0; j < chlidComment.length; j++) {
                                    //如果当前评论的父id等于当前循环的评论id，就给他加进去
                                    if (mainComment[i].id == chlidComment[j].parentId) {
                                        mainComment[i].chlids.push(chlidComment[j]);
                                    }
                                }
                            }
                        }
                        this.comment = mainComment;
                    }
                })
            },
            //添加评论
            addCommentByProductId() {
                //先判断用户是否登录
                if (this.username == null) {
                    alert("请先登录哟");
                    return
                }
                //获取url传参
                const searchParams = new URLSearchParams(window.location.search);
                let id = searchParams.get('id');
                //获取评论框传值
                let comment = $("#comments").val()
                //判断评论不能为空
                if (comment == null || comment == "") {
                    alert("评论内容不能为空");
                    return
                }
                //设置post传参
                const jsonData = {
                    user: this.username,
                    comments: comment,
                    productId: id
                };
                //调用评论接口
                ajax.post("/addCommentByProductId", jsonData, (data) => {
                    //添加成功重新获取评论
                    this.getComment();
                    $("#comments").val("");
                    alert("评论成功");
                });
            },
            //是否打开子评论的输入框框(id)id是对应评论的父id
            isAddChildComments(id) {
                //如果打开了，就设置为false，就是关闭子评论窗
                if (this.isAddChildComment == true) {
                    this.isAddChildComment = false;
                    this.productId = "";
                    this.commentValue = "回复";
                } else {
                    //否则就是点击打开子评论窗
                    this.isAddChildComment = true;
                    this.productId = id;
                    this.commentValue = "收起";
                }
            },
            //添加子评论
            addChildComment(id) {
                //先判断用户是否登录
                if (this.username == null) {
                    alert("请先登录哟");
                    return
                }
                //获取当前文章id
                const searchParams = new URLSearchParams(window.location.search);
                let productId = searchParams.get('id');
                //获取子评论框的值
                let childValue = $("#chlidValue").val();
                const copyChildValue = childValue;
                //判断评论不能为空
                if (copyChildValue == null || copyChildValue == "") {
                    alert("回复内容不能为空");
                    return
                }
                //设置传参
                const jsonData = {
                    user: this.username,
                    productId: productId,
                    commentId: id,
                    child: copyChildValue,
                };
                //调用子评论接口
                ajax.post("/addChildComment", jsonData, (data) => {
                    $("#chlidValue").val("");
                    //添加成功重新获取评论
                    this.getComment();
                    //评论框状态回复默认
                    this.isAddChildComments(id);

                });
            },
            //通过id修改
            updateProduct() {
                // alert("修改方法");
                this.openDialog();
            },
            //打开弹出层
            openDialog() {
                $("#dialog").dialog("open");  // 打开弹出层
            },

        },
    })
</script>

</html>